<template>
<div>
  <div class="transQuery_main">
    <h3>开通微信</h3>
    <div v-if="WeChatData && WeChatData.resultCode != 'SUCCESS'" style="text-align: center;color: blue;">
    <span>审核结果：失败</span><br>
    <span>错误码：{{WeChatData.errorCode}}</span><br>
    <span>失败描述：{{WeChatData.resultMessage}}</span><br>
    </div>
    <a-form @submit="handleInput" :form="form" style="margin-top:30px;">
     
      <a-form-item v-bind="formItemLayout" label="客户名称">
        <a-input
          placeholder="客户名称"
          v-decorator="[
                        'merchantName',
                        {rules: [{ required: true, message: '请填写客户名称' }]}
                      ]"
          />
        </a-form-item>

      <a-form-item v-bind="formItemLayout" label="客户简称">
        <a-input
          placeholder="客户简称"
          v-decorator="[
                        'shortName',
                        {rules: [{ required: true, message: '请填写客户简称' }]}
                      ]"
          />
        </a-form-item>
        <a-form-item :wrapperCol="{span:10,offset:7}">
          <a-button class="button_sty" :loading="loading" type="primary" html-type="submit">提交</a-button>
        </a-form-item>
    </a-form>
    <h3>申请记录</h3>
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.ctime"
    >
     <span slot="resultCode" slot-scope="record">
       {{record.resultCode=="SUCCESS"? "成功":"失败"}}
       </span>
    </a-table>
    <!-- <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />-->

    <a-modal style="top: 250px;" :visible="RelieveVisible" :footer="null" :closable="false">
      <div class="modalClass">
        <span>已开通微信二维码功能</span>
        <span v-if="WeChatData">商户识别码：{{WeChatData.subMchId}}</span>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="handleOk">返回</a-button>
        </div>
      </div>
    </a-modal>
    </div>
 </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "申请时间", dataIndex: "ctime", width: "20%", align: "center" },
  {
    title: "审核结果",
    scopedSlots: { customRender: "resultCode" },
    width: "20%",
    align: "center"
  },
  {
    title: "错误码",
    dataIndex: "errorCode",
    width: "20%",
    align: "center"
  },
  {
    title: "描述",
    dataIndex: "errorMessage",
    width: "20%",
    align: "center"
  }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      form: this.$form.createForm(this),
      today: new Date(),
      columns,
      SNno: 0,
      querydata: {
        memberNo:null,
        merchantName:null,
        shortName:null,
      },
      querylogs:{
        data:null,
        page:1,
        pageSize:10
      },
      statusName: "失败",
      errorCode: "CTU_FAIL_BIZ_CHECK_FAILED",
      remark: "联系人、商户简称、商户名称需要通过敏感词校验",
      merCategoryList: [{ value: 123, name: 123 }],
      pagination: { current: null, total: null },
      list: [],
      WeChatData: null,
      RelieveVisible: false,
      loading: false,
      resultShow: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8, offset: 1 },
          md: { span: 8, offset: 1 }
        }
      }
    };
  },

  mounted() {
    this.getWeChatData();
    this.getWeChatList();
    this.querydata.memberNo = this.$route.params.memberNo
    this.querylogs.data = this.$route.params.memberNo
  },
  methods: {
    moment,
    // onPageChange: function(page, pageSize) {
    //   console.info(page, pageSize);
    //   this.query.page = page;
    //   this.query.pageSize = pageSize;
    //   this.handleSearch();
    // },

    handleOk() {
      this.RelieveVisible = false;
      this.$router.push("/OrgRegister/orgAuditQuery")
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    handleInput(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(this.querydata)
          this.loading = true;
          this.querydata.merchantName = values.merchantName
          this.querydata.shortName = values.shortName
          this.$axios
            .post("/agent/wechat/resubmit",this.querydata).then(res => {
                this.loading = false;
                if (res.data.code == "OK") {
                 this.$message.success("提交成功");
                 this.$router.push("/OrgRegister/orgAuditQuery")
                } else {
                  this.$message.error(res.data.message);
                  return false;
                }
              },
              err => {
                this.loading = false;
              }
            );
        }
      });
    },
    getWeChatData() {
      this.$axios.get("/agent/wechat/fetch/"+this.$route.params.memberNo).then(res => {
        if (res.data.code == "OK") {
          this.WeChatData = res.data.data
          if(this.WeChatData && this.WeChatData.resultCode == "SUCCESS"){
            this.RelieveVisible = true
          }
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      });
    },
    getWeChatList() {
      this.$axios.post("/agent/wechat/fetch/logs",this.querylogs).then(res => {
        if (res.data.code == "OK") {
          this.list = res.data.list
        } else {
          this.$message.error(res.data.message);
          return false;
        }
      });
    },
    backList() {
      this.$router.push("/OrgRegister/orgAuditQuery");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.result {
  text-align: center;
  width: 72%;
  margin: 0 auto;
  margin-top: 120px;
  .success {
    color: #29a576;
  }
  .icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
  }
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 70px 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.button_sty {
  width: 140px;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 40px;
  margin-top: 150px;
}

.modalClass span {
  font-size: 17px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  // width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>